<%--
  Created by IntelliJ IDEA.
  User: asd73
  Date: 2017/9/21
  Time: 22:54
  To change this template use File | Settings | File Templates.
  jq控制html的内容
--%>

<%--jq的下拉菜单--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
<%--    <style type="text/css">
        div{width: 300px; height: 300px;background: pink;}
    </style>--%>
    <script type="text/javascript">
        $(function (e) {
            $('.demo>li').hover(function () {
                //只写一个匿名函数，代表鼠标移入和一处执行的代码是一样的，用stop来解决动画排队机制
                $(this).children('ul').stop().slideToggle();
            })
        });
    </script>
</head>
<body>
    <div id="box">
        <ul class="demo">
            <li id="li01">
                <a href="#">平面设计</a>
                <ul id="ul01">
                    <li><a href="#">平面内容</a></li>
                    <li><a href="#">平面内容</a></li>
                    <li><a href="#">平面内容</a></li>
                    <li><a href="#">平面内容</a></li>
                </ul>
            </li>
            <li id="li02">
                <a href="#">网页设计</a>
                <ul id="ul02">
                    <li><a href="#">网页内容</a></li>
                    <li><a href="#">网页内容</a></li>
                    <li><a href="#">网页内容</a></li>
                    <li><a href="#">网页内容</a></li>
                </ul>
            </li>
            <li id="li03">
                <a href="#">平面设计</a>
                <ul id="ul03">
                    <li><a href="#">平面内容</a></li>
                    <li><a href="#">平面内容</a></li>
                    <li><a href="#">平面内容</a></li>
                    <li><a href="#">平面内容</a></li>
                </ul>
            </li>
            <li id="li04">
                <a href="#">平面设计</a>
                <ul id="ul04">
                    <li><a href="#">平面内容</a></li>
                    <li><a href="#">平面内容</a></li>
                    <li><a href="#">平面内容</a></li>
                    <li><a href="#">平面内容</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>
